<template>
  <div>
    <!-- 内容相似性 -->
    <a-row style="margin-top: 30px;">
      <h1 style="font-size: 2rem;" id="month">
        <a-icon type="trophy" id="RY" />&emsp;搜索结果
      </h1>
    </a-row>
    <a-spin size="large" :spinning="loading">
      <div class="ant-pro-pages-list-projects-cardList">
        <a-list :data-source="genresList" :grid="{gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
          <a-list-item slot="renderItem" slot-scope="item">
            <router-link :to="'/movies/mid/' + item.mid">
              <a-card class="ant-pro-pages-list-projects-card" hoverable>
                <img
                  slot="cover"
                  :src="'http://127.0.0.1:8081/images/' + item.mid + '/picture.jpg'"
                  :alt="item.name"
                />
                <a-card-meta :title="item.name">
                  <template slot="description">
                    <p>语言：{{ item.language }} / {{ item.shoot }}</p>
                    <p>导演：{{ item.directors }}</p>
                    <p>时长：{{ item.timelong }}</p>
                    <p>评分：{{ item.score + 5 }}</p>
                  </template>
                </a-card-meta>
                <div class="cardItemContent">
                  <span>{{ item.issue | fromNow }}</span>
                </div>
              </a-card>
            </router-link>
          </a-list-item>
        </a-list>
      </div>
    </a-spin>
  </div>
</template>

<script>
import moment from "moment";
import { getGenresMovie } from "@/api/MovieRest";
export default {
  data() {
    return {
      genres: "",
      genresList: [],
      form: this.$form.createForm(this),
      loading: true,
    };
  },
  filters: {
    fromNow(date) {
      return moment(date).fromNow();
    },
  },
  created() {
    this.genres = this.$route.params.genres;
    getGenresMovie({ category: this.genres, num: 20 }).then((res) => {
      this.loading = false;
      this.genresList = res;
    });
  },
  mounted() {
    // this.getList();
  },
  methods: {
    getList() {},
    onSearch() {},
  },
};
</script>

<style  scoped>
.ant-pro-pages-list-projects-card {
  height: 400px;
  overflow: hidden;
}
#RY {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
  -webkit-animation: rotate 2s linear infinite;
  -moz-animation: rotate 2s linear infinite;
  -o-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(359deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotateY(0deg);
  }
  to {
    -o-transform: rotateY(359deg);
  }
}
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
}

/* .article-list {
  position: relative;
  width: 1100px;
  border: 1px red solid;
  color: black;
} */
</style>
